<template>
  <div class="page flex-col">
    <div class="main1 flex-col">
      <div class="bd1 flex-col">
        <div class="outer1 flex-col">
          <div class="section1 flex-row">
            <span class="info1">张小明</span>
            <div class="main2 flex-col">
              <span class="info2">男&nbsp;|&nbsp;30周岁</span>
            </div>
          </div>
          <span class="word1">
            保额&nbsp;50万元&nbsp;&nbsp;|&nbsp;&nbsp;交费期间&nbsp;20年/15年
          </span>
        </div>
      </div>
      <div class="bd2 flex-row">
        <div class="layer1 flex-col"><span class="word2">产品信息</span></div>
        <div class="layer2 flex-col"><span class="info3">国华人寿</span></div>
        <div class="layer3 flex-col"><span class="word3">泰康人寿</span></div>
      </div>
      <div class="bd3 flex-row">
        <div class="outer2 flex-col"><span class="word4">产品名称</span></div>
        <span class="paragraph1">
          国华康爱保医疗
          <br />
          保险
        </span>
        <span class="info4">泰康人生保险</span>
      </div>
      <div class="bd4 flex-col"></div>
      <div class="bd5 flex-row">
        <div class="main3 flex-col"><span class="word5">投保年龄</span></div>
        <span class="txt1">30天-65岁</span>
        <span class="info5">30天-60岁</span>
      </div>
      <div class="bd6 flex-col"></div>
      <div class="bd7 flex-row">
        <span class="word6">20年</span>
        <span class="word7">15年</span>
      </div>
      <div class="bd8 flex-col"></div>
      <div class="bd9 flex-row">
        <div class="bd10 flex-col"><span class="word8">保险期间</span></div>
        <span class="word9">20年</span>
        <span class="txt2">终身</span>
      </div>
      <div class="bd11 flex-col"></div>
      <div class="bd12 flex-row">
        <div class="group1 flex-col">
          <span class="paragraph2">
            保险责任
            <br />
            (轻症)
          </span>
        </div>
        <span class="infoBox1">
          40种
          <br />
          35%/40%/45%
        </span>
        <span class="infoBox2">
          42种
          <br />
          30%*3次
        </span>
      </div>
      <div class="bd13 flex-col"></div>
      <div class="bd14 flex-row">
        <div class="group2 flex-col">
          <span class="paragraph3">
            保险责任
            <br />
            (中症)
          </span>
        </div>
        <span class="infoBox3">
          100种/2次
          <br />
          保额100%每次
        </span>
        <span class="word10">-</span>
      </div>
      <div class="bd15 flex-col"></div>
      <div class="bd16 flex-row">
        <div class="box1 flex-col"><span class="word11">年交保费</span></div>
        <span class="word12">12110</span>
        <span class="word13">13890</span>
      </div>
      <div class="bd17 flex-col"></div>
      <div class="bd18 flex-col">
        <div class="section2 flex-row">
          <img
            class="label1"
            referrerpolicy="no-referrer"
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng533b03d8fce66eb7a557cafeadc52eaca3683148791b03aa986bc1a6503f52c7"
          />
          <span class="info6">利益演示</span>
        </div>
      </div>
      <div class="bd19 flex-col">
        <div class="layer4 flex-row">
          <span class="info7">当被保人</span>
          <div class="layer5 flex-col">
            <img
              class="label2"
              referrerpolicy="no-referrer"
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngb97b273653ec10a22d19eb2d9b9c73ad4150b01c6839b52c82588156da7b1022"
            />
            <div class="section3 flex-col"></div>
          </div>
          <span class="word14">岁时</span>
        </div>
        <span class="word15">42</span>
      </div>
      <img
        class="img1"
        referrerpolicy="no-referrer"
        src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc008fde7e9dd34f79b60438bbdaa3ec3b35583118a6683bc1a9c4ba55be6fd30"
      />
      <span class="word16">拖动按钮可查看不同年龄相对应的保单利益</span>
      <div class="bd20 flex-col"></div>
      <div class="bd21 flex-col">
        <img
          class="icon1"
          referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngb97b273653ec10a22d19eb2d9b9c73ad4150b01c6839b52c82588156da7b1022"
        />
      </div>
      <img
        class="img2"
        referrerpolicy="no-referrer"
        src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng4b3476b60c0f9a62c6551fbbce19bbd0fabbd1f1db80bf9a192c33e04eded75d"
      />
      <div class="bd22 flex-row">
        <div class="block1 flex-col"></div>
        <span class="info8">安联淘气宝贝</span>
        <div class="block2 flex-col"></div>
        <span class="info9">泰康人生保险</span>
        <div class="block3 flex-col"></div>
        <span class="word17">京东安联境内旅行险</span>
      </div>
      <div class="bd23 flex-row">
        <div class="section4 flex-col"></div>
        <span class="word18">安联财险乐享人生…</span>
      </div>
      <div class="bd24 flex-col"></div>
      <div class="bd25 flex-row">
        <div class="box2 flex-col"><span class="txt3">产品信息</span></div>
        <div class="box3 flex-col"><span class="word19">国华人寿</span></div>
        <div class="box4 flex-col"><span class="txt4">泰康人寿</span></div>
      </div>
      <div class="bd26 flex-row">
        <div class="layer6 flex-col"><span class="word20">产品名称</span></div>
        <span class="paragraph4">
          国华康爱保医疗
          <br />
          保险
        </span>
        <span class="txt5">泰康人生保险</span>
      </div>
      <div class="bd27 flex-col"></div>
      <div class="bd28 flex-row">
        <div class="bd29 flex-col"><span class="txt6">已交保费</span></div>
        <span class="word21">31,204.55元</span>
        <span class="txt7">28,129.00元</span>
      </div>
      <div class="bd30 flex-col"></div>
      <div class="bd31 flex-row">
        <span class="info10">50,000.00元</span>
        <span class="word22">30,000.00元</span>
      </div>
      <div class="bd32 flex-col"></div>
      <div class="bd33 flex-row">
        <div class="group3 flex-col">
          <span class="txt8">重疾医疗保险金</span>
        </div>
        <span class="word23">100,000.00元</span>
        <span class="word24">80,000.00元</span>
      </div>
      <div class="bd34 flex-col"></div>
    </div>
    <div class="main4 flex-col"></div>
    <div class="main5 flex-col">
      <div class="outer3 flex-row">
          <img
            class="main6"
            referrerpolicy="no-referrer"
            src="../../assets/imgs/dds/ddsProduct/bz.png"
          />
        <img
          class="pic1"
          referrerpolicy="no-referrer"
          src="../../assets/imgs/dds/ddsProduct/bz2.png"
          />
      </div>
      <div class="outer4 flex-row">
        <span class="paragraph5">
          国华康爱保医疗保险
          <br />
          保险保险
        </span>
        <span class="word25">泰康人生保险</span>
      </div>
    </div>
    <div class="main7 flex-col"><span class="word26">交费期间</span></div>
    <span class="txt9">已交保费</span>
    <div class="main8 flex-col">
      <div class="wrap1 flex-col">
        <div class="group4 flex-row">
          <div class="main9 flex-col"></div>
          <span class="word27">42岁</span>
        </div>
        <span class="paragraph6">
          京东安联境内旅行险&nbsp;20020
          <br />
          泰康人生保险&nbsp;26384.3
          <br />
          安联淘气宝贝&nbsp;26384.3
          <br />
          安联财险乐享人生医疗&nbsp;26384.3
        </span>
      </div>
    </div>
    <div class="main10 flex-col"><span class="word28">身故保险金</span></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      constants: {}
    };
  },
  methods: {}
};
</script>
<style lang="less" scoped>
.page {
  z-index: 1;
  position: relative;
  width: 750px;
  height: 2928px;
  background-color: rgba(255, 255, 255, 1);
  overflow: hidden;
  justify-content: flex-start;
  padding-top: 0;
  .main1 {
    z-index: auto;
    width: 750px;
    height: 2904px;
    .bd1 {
      z-index: 3;
      height: 304px;
      background: url('../../assets/imgs/dds/ddsProduct/bg.png')
        100% no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
      width: 750px;
      justify-content: flex-start;
      padding-top: 52px;
      align-items: center;
      .outer1 {
        z-index: auto;
        width: 626px;
        height: 106px;
        .section1 {
          z-index: auto;
          width: 262px;
          height: 56px;
          justify-content: space-between;
          .info1 {
            z-index: 135;
            // width: 121px;
            display: block;
            overflow-wrap: break-word;
            color: rgba(255, 255, 255, 1);
            font-size: 40px;
            letter-spacing: 0.23529410362243652px;
            font-family: PingFangSC-Medium;
            font-weight: 700;
            line-height: 56px;
            text-align: left;
          }
          .main2 {
            z-index: 139;
            height: 36px;
            background: url('../../assets/imgs/dds/ddsProduct/bq.png')
              100% no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
            margin-top: 10px;
            width: 131px;
            justify-content: center;
            align-items: center;
            .info2 {
              z-index: 143;
              // width: 122px;
              display: block;
              overflow-wrap: break-word;
              color: rgba(113, 77, 10, 1);
              font-size: 24px;
              line-height: 33px;
              text-align: center;
            }
          }
        }
        .word1 {
          z-index: 144;
          width: 626px;
          display: block;
          overflow-wrap: break-word;
          color: rgba(255, 255, 255, 1);
          font-size: 26px;
          line-height: 38px;
          text-align: left;
          margin-top: 12px;
        }
      }
    }
    .bd2 {
      z-index: auto;
      width: 670px;
      height: 90px;
      justify-content: space-between;
      margin: 135px 0 0 40px;
      .layer1 {
        z-index: 14;
        height: 90px;
        background-color: rgba(200, 213, 252, 0.44);
        width: 160px;
        justify-content: center;
        align-items: center;
        .word2 {
          z-index: 15;
          width: 132px;
          display: block;
          overflow-wrap: break-word;
          color: rgba(47, 58, 79, 1);
          font-size: 24px;
          line-height: 33px;
          text-align: center;
        }
      }
      .layer2 {
        z-index: 11;
        height: 90px;
        background-color: rgba(200, 213, 252, 0.44);
        width: 253px;
        justify-content: center;
        align-items: center;
        .info3 {
          z-index: 12;
          width: 205px;
          display: block;
          overflow-wrap: break-word;
          color: rgba(47, 58, 79, 1);
          font-size: 24px;
          line-height: 33px;
          text-align: center;
        }
      }
      .layer3 {
        z-index: 8;
        height: 90px;
        background-color: rgba(200, 213, 252, 0.44);
        width: 253px;
        justify-content: center;
        align-items: center;
        .word3 {
          z-index: 9;
          width: 205px;
          display: block;
          overflow-wrap: break-word;
          color: rgba(47, 58, 79, 1);
          font-size: 24px;
          line-height: 33px;
          text-align: center;
        }
      }
    }
    .bd3 {
      z-index: auto;
      width: 645px;
      height: 104px;
      margin: 2px 0 0 41px;
      .outer2 {
        z-index: 17;
        height: 104px;
        background-color: rgba(200, 213, 252, 0.14);
        width: 160px;
        justify-content: center;
        align-items: center;
        .word4 {
          z-index: 18;
          width: 132px;
          display: block;
          overflow-wrap: break-word;
          color: rgba(47, 58, 79, 1);
          font-size: 24px;
          line-height: 33px;
          text-align: center;
        }
      }
      .paragraph1 {
        z-index: 21;
        width: 205px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(47, 58, 79, 1);
        font-size: 24px;
        line-height: 33px;
        text-align: center;
        margin: 19px 0 0 25px;
      }
      .info4 {
        z-index: 22;
        width: 205px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(47, 58, 79, 1);
        font-size: 24px;
        line-height: 33px;
        text-align: center;
        margin: 36px 0 0 50px;
      }
    }
    .bd4 {
      z-index: 20;
      width: 671px;
      height: 1px;
      background-color: rgba(200, 213, 252, 0.44);
      align-self: center;
    }
    .bd5 {
      z-index: auto;
      width: 645px;
      height: 104px;
      margin-left: 41px;
      .main3 {
        z-index: 24;
        height: 104px;
        background-color: rgba(200, 213, 252, 0.14);
        width: 160px;
        justify-content: center;
        align-items: center;
        .word5 {
          z-index: 25;
          width: 132px;
          display: block;
          overflow-wrap: break-word;
          color: rgba(47, 58, 79, 1);
          font-size: 24px;
          line-height: 33px;
          text-align: center;
        }
      }
      .txt1 {
        z-index: 28;
        width: 205px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(47, 58, 79, 1);
        font-size: 24px;
        line-height: 33px;
        text-align: center;
        margin: 36px 0 0 25px;
      }
      .info5 {
        z-index: 29;
        width: 205px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(47, 58, 79, 1);
        font-size: 24px;
        line-height: 33px;
        text-align: center;
        margin: 36px 0 0 50px;
      }
    }
    .bd6 {
      z-index: 27;
      width: 671px;
      height: 1px;
      background-color: rgba(200, 213, 252, 0.44);
      align-self: center;
    }
    .bd7 {
      z-index: auto;
      width: 460px;
      height: 33px;
      justify-content: space-between;
      margin: 35px 0 0 226px;
      .word6 {
        z-index: 35;
        width: 205px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(47, 58, 79, 1);
        font-size: 24px;
        line-height: 33px;
        text-align: center;
      }
      .word7 {
        z-index: 36;
        width: 205px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(47, 58, 79, 1);
        font-size: 24px;
        line-height: 33px;
        text-align: center;
      }
    }
    .bd8 {
      z-index: 34;
      width: 671px;
      height: 1px;
      background-color: rgba(200, 213, 252, 0.44);
      align-self: center;
      margin-top: 35px;
    }
    .bd9 {
      z-index: auto;
      width: 645px;
      height: 104px;
      margin-left: 41px;
      .bd10 {
        z-index: 38;
        height: 104px;
        background-color: rgba(200, 213, 252, 0.14);
        width: 160px;
        justify-content: center;
        align-items: center;
        .word8 {
          z-index: 39;
          width: 132px;
          display: block;
          overflow-wrap: break-word;
          color: rgba(47, 58, 79, 1);
          font-size: 24px;
          line-height: 33px;
          text-align: center;
        }
      }
      .word9 {
        z-index: 42;
        width: 205px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(47, 58, 79, 1);
        font-size: 24px;
        line-height: 33px;
        text-align: center;
        margin: 36px 0 0 25px;
      }
      .txt2 {
        z-index: 43;
        width: 205px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(47, 58, 79, 1);
        font-size: 24px;
        line-height: 33px;
        text-align: center;
        margin: 36px 0 0 50px;
      }
    }
    .bd11 {
      z-index: 41;
      width: 671px;
      height: 1px;
      background-color: rgba(200, 213, 252, 0.44);
      align-self: center;
    }
    .bd12 {
      z-index: auto;
      width: 645px;
      height: 104px;
      margin: 1px 0 0 41px;
      .group1 {
        z-index: 45;
        height: 104px;
        background-color: rgba(200, 213, 252, 0.14);
        width: 160px;
        justify-content: center;
        align-items: center;
        .paragraph2 {
          z-index: 46;
          width: 132px;
          display: block;
          overflow-wrap: break-word;
          color: rgba(47, 58, 79, 1);
          font-size: 24px;
          line-height: 33px;
          text-align: center;
        }
      }
      .infoBox1 {
        z-index: 49;
        width: 205px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(47, 58, 79, 1);
        font-size: 24px;
        line-height: 33px;
        text-align: center;
        margin: 19px 0 0 25px;
      }
      .infoBox2 {
        z-index: 50;
        width: 205px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(47, 58, 79, 1);
        font-size: 24px;
        line-height: 33px;
        text-align: center;
        margin: 19px 0 0 50px;
      }
    }
    .bd13 {
      z-index: 48;
      width: 671px;
      height: 1px;
      background-color: rgba(200, 213, 252, 0.44);
      align-self: center;
    }
    .bd14 {
      z-index: auto;
      width: 645px;
      height: 104px;
      margin-left: 41px;
      .group2 {
        z-index: 52;
        height: 104px;
        background-color: rgba(200, 213, 252, 0.14);
        width: 160px;
        justify-content: center;
        align-items: center;
        .paragraph3 {
          z-index: 53;
          width: 132px;
          display: block;
          overflow-wrap: break-word;
          color: rgba(47, 58, 79, 1);
          font-size: 24px;
          line-height: 33px;
          text-align: center;
        }
      }
      .infoBox3 {
        z-index: 56;
        width: 205px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(47, 58, 79, 1);
        font-size: 24px;
        line-height: 33px;
        text-align: center;
        margin: 19px 0 0 25px;
      }
      .word10 {
        z-index: 57;
        width: 205px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(47, 58, 79, 1);
        font-size: 24px;
        line-height: 33px;
        text-align: center;
        margin: 36px 0 0 50px;
      }
    }
    .bd15 {
      z-index: 55;
      width: 671px;
      height: 1px;
      background-color: rgba(200, 213, 252, 0.44);
      align-self: center;
    }
    .bd16 {
      z-index: auto;
      width: 645px;
      height: 104px;
      margin: 1px 0 0 41px;
      .box1 {
        z-index: 59;
        height: 104px;
        background-color: rgba(200, 213, 252, 0.14);
        width: 160px;
        justify-content: center;
        align-items: center;
        .word11 {
          z-index: 60;
          width: 132px;
          display: block;
          overflow-wrap: break-word;
          color: rgba(47, 58, 79, 1);
          font-size: 24px;
          line-height: 33px;
          text-align: center;
        }
      }
      .word12 {
        z-index: 63;
        width: 205px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(234, 158, 17, 1);
        font-size: 34px;
        font-family: PingFangSC-Medium;
        line-height: 48px;
        text-align: center;
        margin: 28px 0 0 25px;
      }
      .word13 {
        z-index: 62;
        width: 205px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(47, 58, 79, 1);
        font-size: 24px;
        line-height: 33px;
        text-align: center;
        margin: 36px 0 0 50px;
      }
    }
    .bd17 {
      z-index: 64;
      width: 671px;
      height: 1px;
      background-color: rgba(200, 213, 252, 0.44);
      align-self: center;
    }
    .bd18 {
      z-index: 101;
      height: 70px;
      margin-top: 40px;
      width: 750px;
      justify-content: center;
      align-items: center;
      .section2 {
        z-index: auto;
        width: 670px;
        height: 45px;
        justify-content: space-between;
        .label1 {
          z-index: 103;
          width: 12px;
          height: 44px;
          margin-top: 1px;
        }
        .info6 {
          z-index: 102;
          width: 638px;
          display: block;
          overflow-wrap: break-word;
          color: rgba(22, 38, 65, 1);
          font-size: 32px;
          font-family: PingFangSC-Semibold;
          font-weight: 700;
          line-height: 45px;
          text-align: left;
        }
      }
    }
    .bd19 {
      z-index: 108;
      height: 40px;
      align-self: center;
      margin-top: 30px;
      width: 670px;
      align-items: center;
      position: relative;
      .layer4 {
        z-index: auto;
        // width: 280px;
        height: 40px;
        // justify-content: space-between;
        .info7 {
          z-index: 109;
          // width: 112px;
          display: block;
          overflow-wrap: break-word;
          color: rgba(47, 58, 79, 1);
          font-size: 28px;
          line-height: 40px;
          text-align: center;
        }
        .layer5 {
          z-index: auto;
          // width: 91px;
          height: 24px;
          margin: 12px 10px 0 14px;
          .label2 {
            z-index: 111;
            width: 20px;
            height: 20px;
            align-self: flex-end;
            margin-right: 5px;
          }
          .section3 {
            z-index: 115;
            width: 91px;
            height: 1px;
            background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng32c9c8e018e199786b8bb4c293405280689f616f918fc575c5171fbabb16eb6b)
              0px 0px no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
            margin-top: 3px;
          }
        }
        .word14 {
          z-index: 110;
          // width: 56px;
          display: block;
          overflow-wrap: break-word;
          color: rgba(47, 58, 79, 1);
          font-size: 28px;
          line-height: 40px;
          text-align: center;
        }
      }
      .word15 {
        z-index: 116;
        position: absolute;
        left: 323px;
        top: 0;
        // width: 34px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(62, 105, 229, 1);
        font-size: 28px;
        font-family: PingFangSC-Medium;
        line-height: 40px;
        text-align: center;
      }
    }
    .img1 {
      z-index: 117;
      width: 670px;
      height: 35px;
      align-self: center;
      margin-top: 48px;
    }
    .word16 {
      z-index: 134;
      width: 670px;
      display: block;
      overflow-wrap: break-word;
      color: rgba(190, 194, 204, 1);
      font-size: 20px;
      line-height: 28px;
      text-align: center;
      align-self: center;
      margin-top: 28px;
    }
    .bd20 {
      z-index: 99;
      width: 670px;
      height: 1px;
      background-color: rgba(225, 228, 235, 1);
      align-self: center;
      margin-top: 40px;
    }
    .bd21 {
      z-index: 202;
      height: 40px;
      margin-top: 28px;
      width: 750px;
      justify-content: center;
      align-items: flex-end;
      padding-right: 302px;
      .icon1 {
        z-index: 204;
        width: 20px;
        height: 20px;
      }
    }
    .img2 {
      z-index: 178;
      width: 680px;
      height: 392px;
      align-self: center;
      margin-top: 128px;
    }
    .bd22 {
      z-index: auto;
      width: 639px;
      height: 28px;
      margin: 24px 0 0 71px;
      .block1 {
        z-index: 199;
        width: 18px;
        height: 18px;
        border-radius: 3px;
        background-color: rgba(2, 221, 205, 1);
        margin-top: 5px;
      }
      .info8 {
        z-index: 200;
        width: 180px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(2, 221, 205, 1);
        font-size: 20px;
        line-height: 28px;
        text-align: left;
        margin-left: 5px;
      }
      .block2 {
        z-index: 193;
        width: 18px;
        height: 18px;
        border-radius: 3px;
        background-color: rgba(89, 145, 255, 1);
        margin: 5px 0 0 10px;
      }
      .info9 {
        z-index: 194;
        width: 180px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(89, 145, 255, 1);
        font-size: 20px;
        line-height: 28px;
        text-align: left;
        margin-left: 5px;
      }
      .block3 {
        z-index: 190;
        width: 18px;
        height: 18px;
        border-radius: 3px;
        background-color: rgba(253, 183, 91, 1);
        margin: 5px 0 0 20px;
      }
      .word17 {
        z-index: 191;
        // width: 180px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(253, 183, 91, 1);
        font-size: 20px;
        line-height: 28px;
        text-align: left;
        margin-left: 5px;
      }
    }
    .bd23 {
      z-index: auto;
      // width: 203px;
      height: 28px;
      // justify-content: space-between;
      margin: 10px 0 0 507px;
      .section4 {
        z-index: 196;
        width: 18px;
        height: 18px;
        border-radius: 3px;
        background-color: rgba(255, 221, 71, 1);
        margin-top: 5px;
      }
      .word18 {
        z-index: 197;
        // width: 180px;
        margin-left: 5px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(255, 221, 71, 1);
        font-size: 20px;
        line-height: 28px;
        text-align: left;
      }
    }
    .bd24 {
      z-index: 97;
      width: 670px;
      height: 1px;
      background-color: rgba(225, 228, 235, 1);
      align-self: center;
      margin-top: 40px;
    }
    .bd25 {
      z-index: auto;
      width: 670px;
      height: 90px;
      justify-content: space-between;
      margin: 40px 0 0 40px;
      .box2 {
        z-index: 75;
        height: 90px;
        background-color: rgba(200, 213, 252, 0.44);
        width: 160px;
        justify-content: center;
        align-items: center;
        .txt3 {
          z-index: 76;
          width: 132px;
          display: block;
          overflow-wrap: break-word;
          color: rgba(47, 58, 79, 1);
          font-size: 24px;
          line-height: 33px;
          text-align: center;
        }
      }
      .box3 {
        z-index: 70;
        height: 90px;
        background: rgba(200, 213, 252, 0.44);
        width: 253px;
        justify-content: center;
        align-items: center;
        .word19 {
          z-index: 72;
          width: 169px;
          display: block;
          overflow-wrap: break-word;
          color: rgba(47, 58, 79, 1);
          font-size: 24px;
          line-height: 33px;
          text-align: center;
        }
      }
      .box4 {
        z-index: 68;
        height: 90px;
        background: rgba(200, 213, 252, 0.44);
        width: 253px;
        justify-content: center;
        align-items: center;
        .txt4 {
          z-index: 73;
          width: 169px;
          display: block;
          overflow-wrap: break-word;
          color: rgba(47, 58, 79, 1);
          font-size: 24px;
          line-height: 33px;
          text-align: center;
        }
      }
    }
    .bd26 {
      z-index: auto;
      width: 627px;
      height: 104px;
      margin: 2px 0 0 41px;
      .layer6 {
        z-index: 77;
        height: 104px;
        background-color: rgba(200, 213, 252, 0.14);
        width: 160px;
        justify-content: center;
        align-items: center;
        .word20 {
          z-index: 78;
          width: 132px;
          display: block;
          overflow-wrap: break-word;
          color: rgba(47, 58, 79, 1);
          font-size: 24px;
          line-height: 33px;
          text-align: center;
        }
      }
      .paragraph4 {
        z-index: 80;
        width: 169px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(47, 58, 79, 1);
        font-size: 24px;
        line-height: 33px;
        text-align: center;
        margin: 19px 0 0 43px;
      }
      .txt5 {
        z-index: 81;
        width: 169px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(47, 58, 79, 1);
        font-size: 24px;
        line-height: 33px;
        text-align: center;
        margin: 36px 0 0 86px;
      }
    }
    .bd27 {
      z-index: 79;
      width: 671px;
      height: 1px;
      background-color: rgba(200, 213, 252, 0.44);
      align-self: center;
    }
    .bd28 {
      z-index: auto;
      width: 627px;
      height: 104px;
      margin-left: 41px;
      .bd29 {
        z-index: 82;
        height: 104px;
        background-color: rgba(200, 213, 252, 0.14);
        width: 160px;
        justify-content: center;
        align-items: center;
        .txt6 {
          z-index: 83;
          width: 132px;
          display: block;
          overflow-wrap: break-word;
          color: rgba(47, 58, 79, 1);
          font-size: 24px;
          line-height: 33px;
          text-align: center;
        }
      }
      .word21 {
        z-index: 85;
        width: 169px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(62, 105, 229, 1);
        font-size: 24px;
        line-height: 33px;
        text-align: center;
        margin: 36px 0 0 43px;
      }
      .txt7 {
        z-index: 86;
        width: 169px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(62, 105, 229, 1);
        font-size: 24px;
        line-height: 33px;
        text-align: center;
        margin: 36px 0 0 86px;
      }
    }
    .bd30 {
      z-index: 84;
      width: 671px;
      height: 1px;
      background-color: rgba(200, 213, 252, 0.44);
      align-self: center;
    }
    .bd31 {
      z-index: auto;
      width: 424px;
      height: 33px;
      justify-content: space-between;
      margin: 35px 0 0 244px;
      .info10 {
        z-index: 90;
        width: 169px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(62, 105, 229, 1);
        font-size: 24px;
        line-height: 33px;
        text-align: center;
      }
      .word22 {
        z-index: 91;
        width: 169px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(62, 105, 229, 1);
        font-size: 24px;
        line-height: 33px;
        text-align: center;
      }
    }
    .bd32 {
      z-index: 89;
      width: 671px;
      height: 1px;
      background-color: rgba(200, 213, 252, 0.44);
      align-self: center;
      margin-top: 35px;
    }
    .bd33 {
      z-index: auto;
      width: 627px;
      height: 104px;
      margin-left: 41px;
      .group3 {
        z-index: 92;
        height: 104px;
        background-color: rgba(200, 213, 252, 0.14);
        width: 160px;
        justify-content: center;
        align-items: center;
        .txt8 {
          z-index: 93;
          width: 132px;
          display: block;
          overflow-wrap: break-word;
          color: rgba(47, 58, 79, 1);
          font-size: 24px;
          line-height: 33px;
          text-align: center;
        }
      }
      .word23 {
        z-index: 95;
        width: 169px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(62, 105, 229, 1);
        font-size: 24px;
        line-height: 33px;
        text-align: center;
        margin: 36px 0 0 43px;
      }
      .word24 {
        z-index: 96;
        width: 169px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(62, 105, 229, 1);
        font-size: 24px;
        line-height: 33px;
        text-align: center;
        margin: 36px 0 0 86px;
      }
    }
    .bd34 {
      z-index: 94;
      width: 671px;
      height: 1px;
      background-color: rgba(200, 213, 252, 0.44);
      align-self: center;
    }
  }
  .main4 {
    z-index: 4;
    position: absolute;
    left: 0;
    top: -1px;
    width: 750px;
    height: 1px;
    background-color: rgba(235, 235, 235, 1);
  }
  .main5 {
    z-index: 148;
    height: 227px;
    background: url('../../assets/imgs/dds/ddsProduct/pk.png')
      100% no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
    width: 717px;
    position: absolute;
    left: 18px;
    top: 195px;
    .outer3 {
      z-index: auto;
      width: 404px;
      height: 62px;
      justify-content: space-between;
      margin: 45px 0 0 148px;
      .main6 {
        z-index: 151;
        height: 62px;
        width: 62px;
        justify-content: center;
        align-items: center;
        .label3 {
          z-index: 152;
          width: 40px;
          height: 40px;
        }
      }
      .pic1 {
        z-index: 153;
        width: 62px;
        height: 62px;
      }
    }
    .outer4 {
      z-index: auto;
      width: 569px;
      height: 66px;
      justify-content: space-between;
      margin: 10px 0 0 74px;
      .paragraph5 {
        z-index: 149;
        width: 216px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(22, 38, 65, 1);
        font-size: 24px;
        font-family: PingFangSC-Medium;
        line-height: 33px;
        text-align: center;
      }
      .word25 {
        z-index: 175;
        width: 191px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(22, 38, 65, 1);
        font-size: 24px;
        font-family: PingFangSC-Medium;
        line-height: 33px;
        text-align: left;
      }
    }
  }
  .main7 {
    z-index: 31;
    height: 104px;
    background-color: rgba(200, 213, 252, 0.14);
    width: 160px;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 41px;
    top: 740px;
    .word26 {
      z-index: 32;
      width: 132px;
      display: block;
      overflow-wrap: break-word;
      color: rgba(47, 58, 79, 1);
      font-size: 24px;
      line-height: 33px;
      text-align: center;
    }
  }
  .txt9 {
    z-index: 203;
    position: absolute;
    left: 306px;
    top: 1663px;
    // width: 112px;
    display: block;
    overflow-wrap: break-word;
    color: rgba(62, 105, 229, 1);
    font-size: 28px;
    font-family: PingFangSC-Medium;
    line-height: 40px;
    text-align: left;
  }
  .main8 {
    z-index: 180;
    height: 171px;
    background: url('../../assets/imgs/dds/ddsProduct/bq2.png')
      100% no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
    // width: 313px;
    padding: 0 13px;
    justify-content: flex-start;
    padding-top: 14px;
    align-items: center;
    position: absolute;
    left: 230px;
    top: 1752px;
    .wrap1 {
      z-index: auto;
      // width: 287px;
      height: 129px;
      .group4 {
        z-index: auto;
        // width: 287px;
        height: 30px;
        // justify-content: space-between;
        .main9 {
          z-index: 188;
          width: 3px;
          height: 19px;
          background-color: rgba(255, 255, 255, 1);
          margin-top: 6px;
        }
        .word27 {
          z-index: 187;
          width: 274px;
          margin-left: 5px;
          display: block;
          overflow-wrap: break-word;
          color: rgba(255, 255, 255, 1);
          font-size: 22px;
          line-height: 30px;
          text-align: left;
        }
      }
      .paragraph6 {
        z-index: 186;
        // width: 287px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(255, 255, 255, 1);
        font-size: 20px;
        font-family: PingFangSC-Light;
        line-height: 24px;
        text-align: left;
        margin-top: 3px;
      }
    }
  }
  .main10 {
    z-index: 87;
    height: 104px;
    background-color: rgba(200, 213, 252, 0.14);
    width: 160px;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 41px;
    top: 2710px;
    .word28 {
      z-index: 88;
      width: 132px;
      display: block;
      overflow-wrap: break-word;
      color: rgba(47, 58, 79, 1);
      font-size: 24px;
      line-height: 33px;
      text-align: center;
    }
  }
}

</style>
